<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="集包管理"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<!-- 表格 header 按钮 -->
			<template #tableHeader="scope">
				<!-- <el-button type="primary" :icon="Upload" plain @click="batchAdd" v-auth="'batchAdd'">批量添加用户</el-button> -->
				<!-- <el-button type="primary" :icon="Download" plain @click="downloadFile" v-auth="'export'">导出用户数据</el-button> -->
				<!-- <el-button type="primary" plain @click="toDetail">To 子集详情页面</el-button> -->
				<el-button v-auth="'batchAdd'" type="danger" :icon="Delete" plain :disabled="!scope.isSelected"> 批量删除用户 </el-button>
			</template>
			<!-- Expand -->
			<template #expand="scope">
				{{ scope.row }}
			</template>
		</ProTable>
	</div>
</template>

<script setup lang="tsx" name="customers">
import { ref, reactive, watch, computed } from "vue";
import { packageInfo } from "@/api/modules/package";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { CirclePlus, Delete, EditPen, Location, Document } from "@element-plus/icons-vue";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const props = defineProps({
	rowID: {
		required: true,
		type: Number || String
	}
});
const id = computed({
	get() {
		return props.rowID;
	},

	set(value) {}
});

watch(id, () => {
	proTable.value.getTableList();
});

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	// type: 1
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	return {
		list: data.list,
		total: data.count
		// pageNum: data.pageNum,
		// pageSize: data.pageSize
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	newParams.package_no = props.rowID;
	// newParams.username && (newParams.username = "custom-" + newParams.username);
	return packageInfo(newParams);
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const status = reactive([
	{
		userLabel: "启用",
		userStatus: 1
	},
	{
		userLabel: "禁用",
		userStatus: -1
	}
]);
// 表格配置项
const columns: ColumnProps[] = [
	// { type: "selection", fixed: "left", width: 80 },
	{ type: "index", label: "#", width: 80, fixed: "left" },
	// { type: "expand", label: "Expand", width: 100 },
	{
		minWidth: 160,
		prop: "tid",
		label: "系统订单号",
		fixed: "left"
	},
	{
		minWidth: 160,
		prop: "first_waybill_no",
		label: "主运单号"
	},
	{
		minWidth: 160,
		prop: "second_waybill_no",
		label: "从运单号"
	},
	{
		minWidth: 160,
		prop: "status",
		label: "集包类型",
		render: (scope: { row: any }) => {
			return (
				<>
					<el-tag type={scope.row.size == 1 ? "success" : "danger"}>{scope.row.size == 1 ? "小件" : "大件"}</el-tag>
				</>
			);
		}
	},
	{
		minWidth: 160,
		prop: "status",
		label: "状态",
		render: (scope: { row: any }) => {
			return (
				<>
					<el-tag
						type={
							scope.row.status == 102 ? "info" : scope.row.status == 103 ? "" : scope.row.status == 104 ? "success" : "danger"
						}
					>
						{scope.row.status == 102
							? "待取号"
							: scope.row.status == 103
							? "已取号"
							: scope.row.status == 104
							? "已发货"
							: "已废弃"}
					</el-tag>
				</>
			);
		}
	},

	{
		width: 160,
		prop: "user.username",
		label: "用户昵称"
	},
	{
		minWidth: 160,
		prop: "client.username",
		label: "客户昵称"
	},
	{
		minWidth: 160,
		prop: "order_no",
		label: "来源单号"
	},
	{
		minWidth: 160,
		prop: "receiver.name",
		label: "收件人"
	},
	{
		minWidth: 160,
		prop: "channel.name",
		label: "走件渠道"
	},
	{
		prop: "goods_type.name",
		label: "货物类型",
		width: 180
	},
	{
		minWidth: 160,
		prop: "status",
		label: "集包类型",
		render: (scope: { row: any }) => {
			return (
				<>
					<el-tag type={scope.row.express_type == 1 ? "success" : "danger"}>
						{scope.row.express_type == 1 ? "标快" : "特快"}
					</el-tag>
				</>
			);
		}
	},
	{
		prop: "batch_no",
		label: "批次号",
		width: 180
	},
	{
		prop: "created",
		label: "下单时间",
		width: 180
	}
];
</script>
